<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <title>登录界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background-color: #0e92b3; */
            background: url('../image/img_3.png') no-repeat;
            background-size: 100% 100%;
        }

        .form-wrapper {
            width: 300px;
            background-color: rgba(41, 45, 62, .8);
            /*background-color: rgb(#00CCFF);*/
            /*background-color: rgba(30, 144, 255, .8);*/
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }

        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
        }

        .form-wrapper .input-wrapper input {
            background-color: rgb(41, 45, 62);
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #fff;
            outline: none;
        }

        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }

        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }

        .form-wrapper .action {
            display: flex;
            justify-content: center;
        }

        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }

        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 0 auto;
            margin-top: 20px;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }

        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }

        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
    </style>

    <link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../font-awesome-4.4.0/css/font-awesome.min.css">
    <script src="../JQuery/JQuery-2.1.4.min.js"></script>
    <script src="../css/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="form-wrapper col-md-4 col-lg-4">
        <div class="header">
            login
        </div>
        <div class="input-wrapper">
            <div class="border-wrapper">
                <input type="text" id="userName" name="" placeholder="username" class="border-item" autocomplete="off">
            </div>
            <div class="border-wrapper">
                <input type="password" id="password" name="" placeholder="password" class="border-item" autocomplete="off">
            </div>
        </div>
        <div class="action">
            <div class="btn" id="loginbtn">login</div>
            <div class="btn" id="registerbtn">register</div>
        </div>
        <div class="icon-wrapper">
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-qq"></i>
            <i class="iconfont icon-git"></i>
        </div>
    </div>

    <script>
        $('#loginbtn').on("click",function () { // 类似信号与槽
            var userName = $('#userName').val() // 用户名的唯一 id
            var password = $('#password').val() // 密码的唯一 id
            if(userName == "" || password == "")
                return;
            var d={
                "userName":userName ,
                "password":password
            }
            var url = "/login";
            $.ajax({
                type:"post" ,
                url:url ,
                data:d,
                success:function (data) {
                    if (data.status == "ok") {
                        alert("登录成功！")
                        sessionStorage.setItem("username", data.username);
                        sessionStorage.setItem("currentPath", data.currentPath);
                        window.location = 'page.html';
                    } else {
                        alert("用户名或密码错误!!")
                        jQuery("#userName").val(''); // 清空登录信息框
                        jQuery("#password").val('');
                    }
                }
            })
        })

        $('#registerbtn').on("click",function () {
            location.href="registerBetterOne.html";
        });
    </script>
</body>

</html>